import React, { useState } from 'react';
import { message,  Button, Drawer, Popconfirm, Space, Table, Tag } from 'antd';
import type { TableProps } from 'antd';
import {
  Form,
  Input, 
} from 'antd-mobile' 
import type { PopconfirmProps } from 'antd';

const confirm: PopconfirmProps['onConfirm'] = (e) => {
  console.log(e);
  message.success('删除成功');
};

const cancel: PopconfirmProps['onCancel'] = (e) => {
  console.log(e);
  message.error('删除失败');
};

interface DataType {
  key: string;
  name: string;
  age: number;
  tel: number;
  tags: string[];
}

const columns: TableProps<DataType>['columns'] = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '手机号',
    dataIndex: 'tel',
    key: 'tel',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (_) => (
      <Space size="middle">
        <a>Invite</a>
          <Popconfirm
    title="删除确认框"
    description="是否要删除这个"
    onConfirm={confirm}
    onCancel={cancel}
    okText="是"
    cancelText="否"
  >
    <a >Delete</a>
  </Popconfirm> 
      </Space>
    ),
  },
];

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },{
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: 15525252525,
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    tel: 15525282525,
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel:15525252325,
    tags: ['cool', 'teacher'],
  },
];

const App: React.FC = () => {
   const [open, setOpen] = useState(false);
   const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  return (
    <div>
      <div><Button onClick={showDrawer}>添加新用户</Button><Button>批量删除</Button></div>
      <Table<DataType> columns={columns} dataSource={data} ><Table.Summary.Cell index={10}>Fix Right</Table.Summary.Cell></Table> 
       <Drawer
        title="Basic Drawer"
        closable={{ 'aria-label': 'Close Button' }}
        onClose={onClose}
        open={open}
      >
         <Form
        layout='horizontal'
        onFinish={onClose}
        footer={
          <Button block color='primary' size='large' onClick={onClose}>
            提交
          </Button>
        }
      > 
        <Form.Item
          name='name'
          label='姓名'
          rules={[{ required: true, message: '姓名不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入姓名' />
        </Form.Item> <Form.Item
          name='tel'
          label='手机号'
          rules={[{ required: true, message: '手机号不能为空' }]}
        >
          <Input onChange={console.log} placeholder='请输入手机号' />
        </Form.Item>
        </Form>
      </Drawer>
    </div>
    
  )
}

export default App;